<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	省份选择：
	<select onchange="test()" id="provs">
		<option value="0">--请选择--</option>
	</select>

	<br /> 
	
	市区选择：
	<select id="citys">
		<option>--请选择--</option>
	</select>

	<script type="text/javascript">
		//初始化所有的信息
		window.onload=function(){
			var all=[
				{"prov":"安徽","citys":["合肥","芜湖"]},
				{"prov":"河南","citys":["开封","洛阳"]}
				];
			var provs = document.getElementById("provs");
			for(var i=0;i<all.length;i++){
				var opt = new Option(all[i].prov,all[i].prov);
				provs.add(opt);				
			}
		}
		

		function test() {//这里使用普通js函数来模拟ajax，原理是一样的，从服务端将数据传回来，再处理
			var all=[
				{"prov":"安徽","citys":["合肥","芜湖"]},
				{"prov":"河南","citys":["开封","洛阳"]}
				];
			var provs = document.getElementById("provs");
			var citys = document.getElementById("citys");
			//先清空
			citys.options.length = 0;
			//alert("清空");
			var pos=provs.selectedIndex;//原写错了，不是方法pos=provs.selectedIndex();
			//alert("当前省的位置pos is:"+pos);
			
			if (provs.value == 0) {
				var opt = new Option("--请选择--", 0);
				citys.add(opt);
			} else {
				for (var i = 0; i <all[pos-1].citys.length; i++) {
					var opt = new Option(all[pos-1].citys[i],all[pos-1].citys[i]);
					citys.add(opt);
				}
			}
		}
	</script>
</body>
</html>